/* eslint-disable no-undef */
<template>
  <div class="VideoPayment">
    <div class="VideoPayment_price flexcc pl16 pr16">
      <span>需支付：</span>
      <span class="VideoPayment_price_num">￥{{ courseDetail.fee }}</span>
    </div>
    <div class="VideoPayment_tool pl16 pr16">
      <div class="VideoPayment_tool_title flexcc">选择付款方式</div>
      <van-radio-group v-model="paymenttype">
        <div
          class="VideoPayment_tool_item flexcc"
          v-for="item in paymenttypelist"
          :key="item.id"
        >
          <div class="flexcc">
            <img :src="item.icon" class="VideoPayment_tool_item_icon" />
            <span>{{ item.title }}</span>
          </div>
          <van-radio @click="fun(item.id)" :name="item.id" checked-color="#E8541E"></van-radio>
        </div>
      </van-radio-group>
    </div>
    <div class="video_ecaluate_tool flexcc">
      <div class="ecaluate_tool_btn flexcc" @click="goPay">确认支付</div>
    </div>
  </div>
</template>

<script>
import RadioGroup from 'vant/lib/radio-group'
import Radio from 'vant/lib/radio'
import 'vant/lib/radio/style'
import 'vant/lib/radio-group/style'
import wxzf from '../../assets/icon/wxzf.png'
import zfb from '../../assets/icon/zfb.png'
import API from '../../services/index'
export default {
	name: 'VideoPayment',
	components: {
		VanRadioGroup: RadioGroup,
		VanRadio: Radio,
	},
	data() {
		return {
			paymenttypelist: [
				{
					title: '微信支付',
					icon: wxzf,
					nowtype: false,
					id: 0,
				},
				{
					title: '支付宝支付',
					icon: zfb,
					nowtype: false,
					id: 1,
				},
			],
			paymenttype: '',
			courseDetail: {},
			detailParams: {
				courseId: '',
			},
		}
	},
	computed: {},
	created() {
    let order=8
		this.detailParams.courseId = this.$route.params.id
    console.log(	this.detailParams.courseId)
		this.getcourseDetail()
		var code = Request.code
    console.log(code)
		if (code !== undefined) {
			// 调用支付接口
			console.log(code)
		}
	},
	mounted() {
		this.$nextTick(() => {
			// 初始化uni.webview
			// console.log(1)
			document.addEventListener('UniAppJSBridgeReady', function() {
				console.log('初始化uniapp的API成功')
			})
		})
	},
	methods: {
		async getcourseDetail() {
			const res = await API.getcourseDetailAjax({
				params: this.detailParams,
			})
			this.courseDetail = res
		},
		goPay() {
			document.addEventListener('UniAppJSBridgeReady', function() {  
				// eslint-disable-next-line no-undef
				uni.getEnv(function(res) {  
					console.log('当前环境：' + JSON.stringify(res))  
				})  
			})
		},
      fun(v){
      console.log(v)
    },
		goPay() {
      console.log('zhifu')
			// 回调地址 可携带你的业务参数
			// 回调地址 可携带你的业务参数
			const reurl = 'http://h5.nongmuren.com/page/fellow-help/guangxi_h5.html'
			// url 进行编码 没有方法自己网上找一个
			const redirecturi = encodeURI(reurl)
			// 公众号appId
			var appId = 'wxe268d5115b18a6fe'
			var codeurl =
		    'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
		    appId +
		    '&redirect_uri=' +
		    redirecturi +
		    '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
			// 跳转支付页面
			window.location.href = codeurl
		},
	},
}
</script>

<style scoped lang="scss">
.VideoPayment {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  padding: 0 !important;
}
.VideoPayment_price {
  width: 100%;
  height: 73px;
  background: #ffffff;
  font-size: 15px;
  line-height: 21px;
  color: #333333;
  margin-bottom: 10px;
  .VideoPayment_price_num {
    font-size: 23px;
    line-height: 22px;
    color: #e8541e;
    opacity: 1;
  }
}
.VideoPayment_tool {
  width: 100%;
  background: #ffffff;
  .VideoPayment_tool_title {
    width: 100%;
    height: 57px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    font-size: 15px;
    line-height: 21px;
    color: #333333;
  }
}
.VideoPayment_tool_item {
  width: 100%;
  height: 57px;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
  font-size: 17px;
  line-height: 21px;
  color: #333333;
  justify-content: space-between;
  .VideoPayment_tool_item_icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }
}

.video_ecaluate_tool {
  width: 100%;
  height: 71px;
  background: #ffffff;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08);
  position: fixed;
  bottom: 0;
  left: 0;
  justify-content: center;
}
.ecaluate_tool_btn {
  width: 343px;
  height: 47px;
  background: linear-gradient(315deg, #e8541e 0%, #ff7543 100%);
  border-radius: 4px;
  justify-content: center;
  font-size: 18px;
  line-height: 25px;
  color: #ffffff;
}
</style>
